<template>
  <view class="pages">
    <!-- #ifdef APP-PLUS-->
    <u-sticky offset-top="0" zIndex="10000">
    <!-- #endif -->
      <!-- #ifdef H5 -->
      <u-sticky offset-top="-44" zIndex="10000">
      <!-- #endif -->
        <view class="followTop">
          <view>
            <up-navbar  :placeholder="true"  :autoBack="true">
              <template #center>
                <up-tabs @click="handleTabs"
                itemStyle="padding-left: 80rpx; padding-right: 80rpx;heigght:100rpx"
                :list="tabList"
                :scrollable="false"
                :current="currentIndex"
                :inactiveStyle="{
                      fontWeight: '400',
                      color: '#202020',
                      lineHeight:2.5,
                      fontFamily: 'PingFangSC, PingFang SC'
                  }"
                :activeStyle="{
                      color: '#202020',
                      fontWeight: '600',
                      transform: 'scale(1.2)',
                      lineHeight:2.5,
                      fontFamily: 'PingFangSC, PingFang SC'
                  }"
                  lineColor="#00C1B9"
                  :lineHeight="5" lineWidth="30">
                </up-tabs>
              </template>
            </up-navbar>
          </view>
          <view class="uSearch">

            <view class="searchBox">
              <u-search :placeholder="currentIndex==0?'搜索我的关注':'搜索我的粉丝'" :showAction="false" v-model.trim="keyword"
                @search="search" @clickIcon="search" @clear="search" @change="change" @focus="focus"></u-search>
            </view>
            <view v-if="keyword?.length>0" class="cencelBtn" @click="cencelSearch()">
              取消
            </view>
          </view>
        </view>
      </u-sticky>

      <!-- 列表 -->
      <block v-if="currentIndex == 0">        
        <view v-if="(!list[0] || !list[0].length)&&loaded" class="listBox">
          <image src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"
            class="emptyImg" v-if="keyword?.length>0||searchImg"></image>
          <view v-if="keyword?.length>0||searchImg" style="text-align: center;color:#b0b0b0;margin-top:20rpx">抱歉暂未找到相关数据</view>
          <view v-else>
            <image src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"
              class="emptyImgFolow"></image>
            <view class="noData">暂无关注数据</view>
          </view>
        </view>
        <view v-else class="listBox" >
          <view class="item_box">

            <view class="item-1"   v-for="(item, i) in list[0]" :key="item.id">
              <image :src="item?.avatar" class="avatar" @click.stop="toMyPage(item,0)"/>
              <view class="name u-line-1">{{ item?.name }}</view>
              <view class="btn" :style="{
                  background: item?.followed ? '#F5F6F8' :  ' #00C1B9',
                  color: item?.followed  ?  '#AAAAAA': ' #FFFFFF',
                }" @click="follow(item, i, 1)">{{ item.followed ? '已关注' : '+关注' }}</view>

              <!-- 1互相  0未关注 -->
            </view>
          </view>
        </view>
      </block>
      <block v-if="currentIndex == 1">       
        <view v-if="(!list[1] || !list[1].length)&&loaded" class="listBox">
          <image src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"
            class="emptyImg" v-if="keyword?.length>0||searchImg"></image>
            <view v-if="keyword?.length>0||searchImg" style="text-align: center;color:#b0b0b0;margin-top:20rpx">抱歉暂未找到相关数据</view>
          <view v-else>
            <image src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"
              class="emptyImgFolow"></image>
            <view class="noData">你还没有粉丝数据</view>
          </view>
        </view>
        <view v-else class="listBox" >
          <view class="item_box">

          <view class="item-1"   v-for="(item, i) in list[1]" :key="item.id">
            <image :src="item?.avatar" @click.stop="toMyPage(item,1)"/>
            <view class="name u-line-1">{{ item?.name }}</view>
            <view class="btn" @click="follow(item, i, 2)" :style="{
              background: item?.is_mutual == 0 ? '#00C1B9' :  '#F5F6F8',
              color: item?.is_mutual == 0 ? '#FFFFFF': '#AAAAAA',
            }">{{
            Number(item?.is_mutual) === 1 ? '互相关注' : '回关'
          }}</view>
          </view>
          </view>
        </view>
      </block>

      <!-- <h-loading :show="showLoading" :showMore="list[currentIndex].length"></h-loading> -->
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad, onReachBottom } from '@dcloudio/uni-app'
  import { showToast, navigateTo, navigateBack } from '@/utils'
  import { getFollowListApi, getFansListApi } from '@/services/my/user'
  import { followUserApi } from "@/api/social"
import type font from '@/uni_modules/lsj-edit/components/lsj-edit/edit-btns/mixins/font'
  const currentIndex = ref<number>(0)
  const showLoading = ref<boolean>(false) // 是否显示加载中
  const loaded = ref(false)
  const searchImg = ref(false)
  const params = ref<any>([
    // 1人员 2医院 3店铺 （默认为1）
    {
      type: 2,
      page: 1,
      limit: 20,
    },
    {
      type: 1,
      page: 1,
      limit: 20,
    },
  ])
  onLoad(async ({
    current
  }) => {
    console.log(current)
    currentIndex.value = Number(current)
    if (current == 0) {
      getFollowList()
    } else {
      getFansList()
    }
  })
  const keyword = ref('')
  const isShowSearch = ref(false) // 是否显示顶部搜索

  const list = ref<any[]>([[], []]) // 列表
  const last_page = ref([0, 0]) // 总页数


  function focus(e){
    console.log(e)

  }
  /**
   * 隐藏搜索框
   */
  function change(e){
    keyword.value = e
    list.value[currentIndex.value] = []
    last_page.value[currentIndex.value] = 0
    params.value[currentIndex.value].page = 1
    searchImg.value = true
    if (currentIndex.value == 0) {
      getFollowList()
    } else {
      getFansList()
    }
  }
  function hideSearch() {

    keyword.value = ''
    isShowSearch.value = !isShowSearch.value
    list.value[currentIndex.value] = []
    last_page.value[currentIndex.value] = 0

  }
  /**
   * 搜索
   */
  function search() {
    list.value[currentIndex.value] = []
    last_page.value[currentIndex.value] = 0
    params.value[currentIndex.value].page = 1
    searchImg.value = true
    if (currentIndex.value == 0) {
      getFollowList()
    } else {
      getFansList()
    }
  }
  function cencelSearch() {
    keyword.value = ''
    searchImg.value = false
    search()
  }

  /**
   * 关注、取消关注
   * @param {*} row
   * @param {*} index
   */
  async function follow(row : any, i : number, type : number) {
    try {
      const res : any = await followUserApi({
        to_uid: type == 1 ? row.to_user_id : row.uid,
      })
      const c = currentIndex.value

      if(c==0){
        const index = list.value[c].findIndex((item) => item.id == row.id)
        list.value[c][index].followed = list.value[c][index].followed == true ? false : true
      }else{
        const index = list.value[c].findIndex((item) => item.id == row.id)
        list.value[c][index].is_mutual = list.value[c][index].is_mutual == 0 ? 1 : 0
      }
      uni.$emit('followUser', { uid: type == 1 ? row.to_user_id : row.uid })
      uni.$emit('updateUserInfo')
      showToast(res.message)
    } catch (error) {
      console.log(error)
    }
  }

  // 切换tab
  function handleTabs(row : any) {
    currentIndex.value = row.index
    list.value[currentIndex.value] = []

    keyword.value = ''
    if (currentIndex.value == 0) {
      getFollowList()
    } else {
      getFansList()
    }

  }

  /**
   * 获取关注列表
   */
  async function getFollowList() {
    try {
      showLoading.value = true
      loaded.value = false
      params.value[currentIndex.value].name = keyword.value
      const res : any = await getFollowListApi(params.value[currentIndex.value])
      last_page.value[currentIndex.value] = res.data.last_page || 0
      let arr=  Array.isArray(res.data.data) ? res.data.data : []
      let arr1=arr.map(v=>{
        return{
          ...v,
          followed:true
        }
      })
      list.value[currentIndex.value] = params.value[currentIndex.value].page = 1?arr1:list.value[currentIndex.value].concat(arr1)
      showLoading.value = false
      loaded.value = true
    } catch (error) {
      showLoading.value = false
    }
  }

  /**
   * 获取关注列表
   */
  async function getFansList() {
    try {
      showLoading.value = true
      loaded.value = false
      params.value[currentIndex.value].name = keyword.value
      const res : any = await getFollowListApi(params.value[currentIndex.value])
      last_page.value[currentIndex.value] = res.data.last_page || 0
      list.value[currentIndex.value] = list.value[currentIndex.value].concat(
        Array.isArray(res.data.data) ? res.data.data : [],
      )

      list.value[currentIndex.value] = params.value[currentIndex.value].page = 1?res.data.data:list.value[currentIndex.value].concat(res.data.data)
      showLoading.value = false
      loaded.value = true
    } catch (error) {
      showLoading.value = false
    }
  }

  function toMyPage(item:any,type:number) {
    if(item.app_user_tag) {
      navigateTo(`/pages-users/my-page/official-doctor-home?is_self=0&uid=${type == 0? item.to_user_id: item.uid}&tag=${item.app_user_tag}` )
    }else {
      navigateTo(`/pages-users/my-page/other-index?is_self=0&uid=${type == 0? item.uid:item.to_user_id}` )
    }
  }

  const tabList = ref([{ name: '关注' }, { name: '粉丝' }])
  onReachBottom(() => {
    if (params.value[currentIndex.value].page < last_page.value[currentIndex.value]) {
      params.value[currentIndex.value].page++
      if (currentIndex.value == 0) {
        getFollowList()
      } else {
        getFansList(0)
      }
    }
  })
</script>
<style>

</style>
<style lang="scss" scoped>
page{
  background: #F5F6F8;
}
  .followTop {
    width: 100%;
    background: #fff;
  }

  .uSearch {
    padding: 0 24rpx 10rpx;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    .searchBox {
      flex: 1;
    }

    .cencelBtn {
      font-weight: 500;
      font-size: 26rpx;
      color: #828282;
      margin-left: 10rpx;
    }
  }

  .pages {
    .search-active {
      animation: search-keyframes 0.5s;
    }

    @keyframes search-keyframes {
      0% {
        width: 0%;
      }

      100% {
        width: 100%;
      }
    }

    .search-c {
      margin-top: 8rpx;
      width: 100%;
    }

    .close-search {
      font-size: 26rpx;
      font-weight: 500;
      color: #000000;
    }

    .listBox {
      padding: 0 25rpx 0;
      // border-top: 20rpx solid #f6f6f6;
      border-radius: 20rpx;
      box-sizing: border-box;
      .item_box{
        background: #fff;
        padding: 0 20rpx;
        border-radius: 20rpx;
        min-height: 80vh;
      }
    }

    .item-1 {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 0;
      border-bottom: 1px solid #EEEEEE;

      image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        margin-right: 22rpx;
        background-color: #eee;
      }

      .name {
        flex: 1;
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
      }

      .btn {
        width: 130rpx;
        height: 48rpx;
        background: #f6f6f6;
        border-radius: 24rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #666666;
      }
    }



  }


  .emptyImg {
    width: 240rpx;
    height: 200rpx;
    display: block;
    margin: 161rpx auto 0;
  }

  .emptyImgFolow {
    width: 240rpx;
    height: 200rpx;
    display: block;
    margin: 250rpx auto 0;
  }

  .noData {
    font-weight: 500;
    font-size: 30rpx;
    color: #ABABAB;
    text-align: center;
    margin-top: 10rpx
  }
</style>
